<template>
    <div>
        <!-- 顶部标签 -->
        <van-nav-bar title="添加好友" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <!-- 搜索框 -->
        <van-search placeholder="请输入手机号" show-action v-model="value">
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>
        <!-- 搜索结果 -->
        <van-cell center border v-if="res != ''">
            <template #icon>
                <van-image round fit="cover" width="3.125rem" height="3.125rem" :src="res.headImgUrl" />
            </template>
            <template #title>
                <div>{{ res.nickname }}<span class="inputValueLength" v-show="showInput">{{ inputValue.length }}/20</span></div>
                <div class="postscript" v-if="!showInput" :style="{ lineHeight : inputValue.length >= 20 ? '0.875rem' : '1.5rem' }">附言：{{ postscript }}</div>
                <input class="input" type="text" maxlength="20" v-model="inputValue" v-else/>
            </template>
            <template>
                <van-button type="default" size="small" @click="showInput = !showInput">{{ showInput ? "确认修改" : "修改附言" }}</van-button>
                <van-button type="primary" size="small" style="margin-left: .625rem" @click="add_friend">添加好友</van-button>
            </template>
        </van-cell>
    </div>
</template>

<script>
    import { Toast } from "vant";
    import { mapActions, mapMutations, mapState } from 'vuex';
    
    export default {
        name: "AddFriend",
        data() {
            return {
                value: "",
                res: "",
                showInput: false,
                inputValue: "",
            }
        },
        computed: {
            ...mapState(["friendList", "user"]),
            postscript: {
                get() {
                    return this.inputValue == "" ? "你好，我是" + this.user.nickname : this.inputValue;
                },
                set(newValue) {
                    this.inputValue = newValue;
                }
            },
        },
        methods: {
            ...mapActions('addFriend', ['addFriend', 'searchUser']),
            ...mapMutations('newFriend', ['pushApplications']),
            ...mapActions('newFriend', ['getApplications']),
            async onSearch() {    // 搜索用户
                const chineseMobileRegex = /^1[3-9]\d{9}$/;

                if (!chineseMobileRegex.test(this.value)) {
                    this.value = "";
                    Toast.fail("请输入正确的11位手机号");
                    return;
                }
                if(this.user.phone == this.value) {
                    this.value = "";
                    Toast.fail("不能添加自己");
                    return;
                }

                // 使用正确的方式检查是否已经是好友
                if(this.friendList.some(friend => friend.friendId && friend.friendId.phone === this.value)) {
                    this.value = "";
                    Toast.fail("该用户已经是您的好友");
                    return;
                }

                let res = await this.searchUser(this.value);
                if (res.status_code == 200) {
                    this.res = res.data;
                } else {
                    Toast.fail("用户不存在");
                }
            },
            async add_friend() {    // 点击添加按钮
                let res = await this.addFriend({ 
                    sender: this.user.phone,                // 好友申请【发送者】
                    receiver: this.value,                   // 好友申请【接收者】
                    postscript: this.postscript,            // 附言
                })
                if (res.status_code == 200) 
                {
                    Toast.success(res.info);
                    let res_applications = await this.getApplications(this.user.phone);     // 发送成功更新申请列表
                    this.pushApplications(res_applications.data)
                } else if (res.status_code == 409) {
                    Toast.fail(res.info);
                } else if (res.status_code == 400) {
                    // 处理已经是好友的情况
                    Toast.fail(res.info || "你们已经是好友了");
                } else {
                    Toast.fail(`错误：${res.info || res.details || "添加好友失败"}`);
                } 
                this.inputValue = "";
            }
        },
    }
</script>

<style lang="less" scoped>
    .van-image {
        margin-right: .3125rem;
    }
    .input {
        height: 1.5rem;
        width: 9.875rem;
        box-sizing: border-box;
    }
    .postscript {
        height: 1.5rem;
        width: 9.875rem;
        overflow-wrap: break-word;
        font-size: .625rem;
        color: #6a6a6a;
    }
    .inputValueLength {
        float: right;
    }
</style>